<template>

  <el-container>

    <el-header>
      <div class="header-div">
        <img src="@/assets/logo.png" alt="">
        <span><router-link to="/" >******系统</router-link></span>
        <el-button type="info" style="float: right" @click="logout">登录</el-button>
      </div>
    </el-header>

    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-btn" @click="openCollapse">|||</div>
        <el-menu :default-active="activePath" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router class="el-menu-vertical-demo" :collapse="isCollapse" :collapse-transition="false" @select="menuSelect">

          <el-submenu :index="'/' + item.path" v-for="item in menuData" :key="item.id">
            <template #title>
              <i class="el-icon-location"></i>
              <span>{{item.title}}</span>
            </template>
            <el-menu-item v-for="subItem in item.children" :key="subItem.id" :index="'/' + subItem.path">{{subItem.title}}</el-menu-item>
          </el-submenu>

        </el-menu>
      </el-aside>

      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>

</template>

<script lang='js'>
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import router from "@/router";
async function useLoadMenuData(state) {
  //@ts-ignore
  const menus = await ajax({ url: "menus" });
  state.menuData = menus;
}
export default defineComponent({
  name: "~Layout",
  setup(props, { emit, slots }) {
    const state = reactive({
      menuData: [],
      isCollapse: false,
      activePath: '',
      openCollapse() {
        this.isCollapse = !this.isCollapse;
      },
      logout() {
        window.sessionStorage.clear();
        router.push('/login');
      },
      menuSelect(index, indexPath, item, routeResult) {
        state.activePath = index;
        sessionStorage.setItem("routerPath", index);
      }
    });

    onMounted(() => {
      useLoadMenuData(state);
      state.activePath = sessionStorage.getItem("routerPath") || "";
    });

    return {
      ...toRefs(state)
    };
  }
});
</script>

<style lang='css' scoped>
.el-container {
  height: 1000px;
}
.el-header {
  background-color: #373d41;
  color: #fff;
  font-size: 20px;
}
a {
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}
.el-aside {
  background-color: #333744;
}
.toggle-btn {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: .2em;
  cursor: pointer;
}
.header-div img {
  width: 60px;
  height: 60px;
  vertical-align: middle;
  margin-right: 20px;
}
.el-main {
  background-color: #eaedf1;
}
</style>
